<template>
  <div class="filter-options">
    <div
      v-for="(options, category) in filters"
      :key="category"
      class="filter-category"
    >
      <div class="filter-header" @click="toggleCategory(category)">
        {{ category }}
        <span class="toggle-icon">{{
          expandedCategories[category] ? '▲' : '▼'
        }}</span>
      </div>
      <div v-if="expandedCategories[category]" class="filter-list">
        <label v-for="option in options" :key="option" class="filter-option">
          <input
            type="checkbox"
            v-model="selectedFilters[category]"
            :value="option"
          />
          {{ option }}
        </label>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const filters = {
  公司行业: ['互联网', '金融', '教育', '医疗'],
  职位类型: ['技术', '产品', '设计', '运营'],
  工作经验: ['应届生', '1-3年', '3-5年', '5-10年'],
  学历要求: ['大专', '本科', '硕士', '博士']
  // Add more filter categories and options
}

const expandedCategories = reactive({})
const selectedFilters = reactive({})

const toggleCategory = (category) => {
  expandedCategories[category] = !expandedCategories[category]
}
</script>

<style scoped>
.filter-options {
  margin-top: 15px;
  display: flex;
}

.filter-category {
  margin-bottom: 10px;
  padding: 0 60px;
  /* display: flex; */
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
  color: #666;
  font-size: 14px;
}

.toggle-icon {
  font-size: 12px;
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.filter-option {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.filter-option input {
  margin-right: 5px;
}
</style>
